<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <link rel="stylesheet" href="/Tree/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table id="demo" lay-filter="insectTable"></table>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="title" required lay-verify="required" id="className" placeholder="请输入你的查询内容"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-col-md4">
            <button class="layui-btn" type="button" id="buttonFind">查询</button>
        </div>
        <div class="layui-col-md1">
            <button class="layui-btn" type="button" id="buttonAdd">添加新的班级信息</button>
        </div>
    </div>
</div>

<script src="/Tree/LayUiBac/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="alt">修改数据</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        let $ = layui.$;
        let layer = layui.layer;

        let show = table.render({
            elem: '#demo'
            , url: '/Tree/classM' //数据接口
            , page: true //开启分页
            , request: {
                pageName: "pageNo"
                , limitName: "pageSize"
            }
            , cols: [[ //表头
                {field: 'cName', title: '小班名称', width: 150, sort: true, fixed: 'left'}
                , {field: 'cId', title: 'id', width: 150}
                , {field: 'cRes', title: '负责人', width: 150}
                , {field: 'cCel', title: '电话', width: 180, sort: true}
                , {field: 'cDis', title: '管理区域', width: 200, sort: true}
                , {fixed: 'right', width: 300, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        $('#buttonFind').on('click', function () {
            show.reload({
                where: {
                    className: $('#className').val()
                }
                , page: {
                    curr: 1
                }
            })
        })

        $('#buttonAdd').on('click', function () {
            let str = "";
            layer.open({
                type: 2
                , content: "/Tree/LayUiBac/home/cla/add.html"//填一个url地址
                , area: ['500px', '500px']
                , shade: ['0.9', '#393D49']
                , anim: 1
                , btn: ["确定提交", "取消提交"]
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    let a = body.find("input[name=className]").val();
                    let b = body.find("input[name=mainName]").val();
                    let c = body.find("input[name=tel]").val();
                    let d = body.find("input[name=mainArea]").val();

                    str+="&className="+a+"&mainName="+b+"&tel="+c+"&mainArea="+d;
                    // console.log(str)
                    $.ajax({
                        type: "post",
                        url: "/Tree/classM?method=add"+ str,
                    })
                    layer.close(index);
                    show.reload();
                }
                , btn2: function (index) {
                    layer.close(index);
                }
                , success: function (layero, index) {

                }
            })
        })

        table.on('tool(insectTable)', function (obj) {
            var data = obj.data;
            console.log(data)
            var layEvent = obj.event;
            var tr = obj.tr;
            let str = "";
            if (layEvent === "detail") {
                layer.open({
                    type: 2
                    , content: "/Tree/LayUiBac/home/cla/alt.html"//填一个url地址
                    , area: ['500px', '500px']
                    , shade: ['0.9', '#393D49']
                    , anim: 1
                    , btn: ["返回主菜单"]
                    , yes: function (index, layero) {
                        // let body = layer.getChildFrame('body',index);
                        layer.close(index);
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        body.find("input[name=className]").val(data.cName);
                        body.find("input[name=mainName]").val(data.cRes);
                        body.find("input[name=tel]").val(data.cCel);
                        body.find("input[name=mainArea]").val(data.cDis);

                    }
                })
            }else if(layEvent === "alt"){
                layer.open({
                    type: 2
                    , content: "/Tree/LayUiBac/home/cla/test2.html"//填一个url地址
                    , area: ['500px', '500px']
                    , shade: ['0.9', '#393D49']
                    , anim: 1
                    , btn: ["确认提交"]
                    , yes: function (index, layero) {
                        let body = layer.getChildFrame('body',index);
                        let a,b,c,d;
                       a= data.cId;
                       b= body.find("input[name=mainName]").val();
                       c= body.find("input[name=tel]").val();
                       // d= body.find("input[name=mainArea]").val();
                       str+="&mainName="+b+"&tel="+c+"&cId="+a;
                        console.log(str)
                        $.ajax({
                            type: "post",
                            url: "/Tree/classM?method=alt" + str,
                        })
                        layer.close(index);
                        show.reload();
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        // body.find("input[name=className]").val(data.cName);
                        body.find("input[name=mainName]").val(data.cRes);
                        body.find("input[name=tel]").val(data.cCel);
                        // body.find("input[name=mainArea]").val(data.cDis);
                    }
                })
            }
        })
    });

</script>

</body>
</html>